<template>
  <nav class="title">
    <span class="active" @click="showAcheet">{{title}} <van-icon name="arrow-down" class="arrow-down" /></span>
    <div class="search-box pr" v-show="searchShow"><Search :search="searchInfo" @new_search="getSearch" /></div>
    <span class="active" style="margin-left:auto">
      <span class="choose-btn" v-if="wordShow==true" @click="popupShow=true">筛选</span>
      <img v-else :src="imgs.add" alt="" class="add-icon" @click="routerAdd">
    </span>
    
    <van-popup class="right-popup pa" v-model="popupShow" position="right" :overlay="true">
      <div class="popup-box pr">
        <p class="title">请选择学校</p>
        <ul>
          <li v-for="(item,index) in popupData" :key="index">
            <span @click="chooseSchool(item)" :class="{choosen:chosen.includes(item.name)}">{{item.name}}</span>
          </li>
        </ul>
        <p class="pa btn-box">
          <van-button class="bc-gray" type="default" @click="popupShow=false">取消</van-button>
          <van-button class="bc-green" type="primary" @click="sure">确认</van-button>
        </p>
      </div>
    </van-popup>
  </nav>
</template>
<script>
import Search from '../../../../components/search.vue'
export default {
  props:["searchInfo","getListData","resquest","routerAdd","pageInfo","wordShow","searchShow","columnsData","categoryData"],
  components: {Search},
  name: "",
  data() {
    return {
      title:"全部",
      imgs:{
        add:require('../../../../assets/images/home/lifeserve/icon-edit.png')
      },
      columns:["全部","收藏"],

      popupShow:false,
      popupData:[],
      chosen:[],//已经选中的school
      
    };
  },
  methods: {
    showAcheet(){
       this.$store.state.dias.acheet.show=true
       this.$store.state.dias.acheet.columns=this.columnsData||this.columns
       this.$store.state.dias.acheet.confirm=this.confirm
     },
     confirm(val){
      this.title=val
      this.$store.state.dias.acheet.show=false
      switch(_router.history.current.path){
        case "/jobServe/workstudy":this.resquest.list=this.title=="全部"?"job/qgzxList":"job/myCollect";this.searchInfo.type=this.title=="全部"?"":"3";break;
        case "/jobServe/recruit":this.resquest.list=this.title=="全部"?"job/zhaopinList":"job/myCollect";this.searchInfo.type=this.title=="全部"?"":"2";break;
        case "/jobServe/preach/school":this.resquest.list=this.title=="全部"?"job/xuanjiangList":"job/myCollect";this.searchInfo.type=this.title=="全部"?"":"1";break;
        case "/jobServe/preach/others":this.resquest.list=this.title=="全部"?"job/preachList":"job/myPreachCollect";this.searchInfo.type=this.title=="全部"?"":"1";break;
        case "/studyServe/research/notice":this.searchInfo.category=this.categoryData.find(val=>val.label===this.title).value;break;
        case "/studyServe/research/order":this.searchInfo.category=this.categoryData.find(val=>val.label===this.title).value;break;
        case "/workflow/input/family":this.searchInfo.year=val=="全部"?"":val;break;
        case "/workflow/input/punish":this.searchInfo.year=val=="全部"?"":val;break;
      }
      this.getSearch()
    },
     getSearch(){
       this.pageInfo.page=1
       this.getListData()
     },


     getPopupData(){
       if(_router.history.current.fullPath==="/jobServe/preach/others")_g.apiPost("job/preachGroup",{}).then(res=>{
         this.$set(this,"popupData",res)
       })
     },

    /**
     * @name 选择学校
     */
     chooseSchool(item){
       if(this.chosen.includes(item.name)){
         this.chosen.splice(this.chosen.indexOf(item.name),1)
       }else{
         this.chosen.push(item.name)
       }
     },

     sure(){
      //  this.popupShow=false
       this.searchInfo.school=this.chosen.join(",")
       this.getSearch()
     }
     

  },
  created() {
    this.getPopupData()
  }
};
</script>
<style lang="scss" scoped>
 .title{
    font-size: 16px;
    color: #fff;
    line-height: 90px;
    height: 90px;
    background-color: #00998d;
    display: flex;
    padding:0 20px;
  }
  .search-box{
    // width:calc(100% - 220px);
    flex-grow: 1
  }
  .active:active{
    background-color: transparent;
  }
  .add-icon{
    width: 50px;
    height: 50px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .right-popup{
    width: 80%;
    height: 100%;
    background-color: #fff;
    z-index: 1500;
    color: #333
  }
  .popup-box{
    box-sizing: border-box;
    height: 100%;

    >p.title{
      padding: 0 10px;
    }

    ul{
      padding: 10px;
      text-align: center;
      max-height: calc(100% - 100px);
      overflow: auto;
      
      li{
        margin: 20px 0;
        padding: 10px;

        span{
          display: inline-block;
          width: 70%;
          height: 80px;
          font-size: 14px;
          border: 1px solid #e4e4e4;
        }
        span.choosen{
          border-color: #00998d;
          color: #00998d;
        }
      }

      
    }
    .btn-box{
      bottom: 0;
      width: 100%;
      display: flex;
    }
    .bc-gray,.bc-green{
      flex: 1
    }
  }
</style>